<template>
    <div class="user-list">
        <div style="margin: 20px 0">
            <el-button type="primary" @click="addData">添加类型</el-button>
        </div>
        <el-table :data="dataList" style="width: 100%">
			<el-table-column type="index" width="50" />
            <el-table-column prop="title" label="标题" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="updateData(scope.row)"
                        >编辑</el-button
                    >
                    <el-button type="danger" @click="delData(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        />
        <el-dialog
            v-model="dialogInfo.visible"
            :title="dialogInfo.title"
            width="30%"
            :close-on-click-modal="false"
            :destroy-on-close="true"
        >
            <el-form
                ref="ruleFormRef"
                :model="form"
                :rules="rules"
                label-width="80px"
            >
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)"
                        >确定
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { add, del, list, update } from "@/api/etymologyType";

import { ElMessage } from "element-plus";

const ruleFormRef = ref();
const total = ref(0);
const query = reactive({
    pageSize: 10,
    pageNum: 1,
});
const dataList = ref([]);
const dialogInfo = reactive({
    title: "添加类型",
    visible: false,
    type: 0,
});

const form = reactive({
    title: "",
    id: 0,
});

const rules = reactive({
    title: [{ required: true, message: "请输入标题", trigger: "blur" }],
});

onMounted(() => {
    getData();
});

const getData = async () => {
    try {
        const res = await list(query);
        dataList.value = res.result.list;
        total.value = res.result.count;
    } catch (err) {
        console.error(err);
    }
};
const handleSizeChange = (newSize) => {
    query.pageSize = newSize;
    getData();
};

const handleCurrentChange = (newPage) => {
    query.pageNum = newPage; // Reset to first page on size change
    getData();
};

const addData = () => {
    for (const key in form) {
        form[key] = "";
    }
    dialogInfo.type = 0;
    dialogInfo.title = "添加类型";
    dialogInfo.visible = true;
};

const updateData = (row) => {
    for (const key in form) {
        form[key] = row[key];
    }
    dialogInfo.type = 1;
    dialogInfo.title = "修改类型";
    dialogInfo.visible = true;
};

const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            if (!dialogInfo.type) {
                await add({
                    title: form.title,
                });
                ElMessage.success("添加成功");
                resetForm(ruleFormRef.value);
                getData();
                return;
            }

            await update(form);
            ElMessage.success("修改成功");
            resetForm(ruleFormRef.value);
            getData();
        }
    });
};

const delData = async (row) => {
    await del({
        id: row.id,
    });
    ElMessage.success("删除成功");
    getData();
};

const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    dialogInfo.visible = false;
};
</script>
